<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
    <!-- Latest compiled and minified CSS & JS -->
    <link rel="stylesheet" media="screen" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div id="hd" class="container" style="margin-top:40px;">
    <phone :lists="goods"></phone>
    <div>总价：{{total}}</div>
</div>
</body>
<script type="text/x-template" id="phone">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">购物车</h3>
        </div>
        <div class="panel-body">
            <table class="table table-hover table-striped table-condensed">
                <thead>
                <tr>
                    <th>商品id</th>
                    <th>商品名称</th>
                    <th>商品价格</th>
                    <th>商品数量</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="v in lists">
                    <td>{{v.id}}</td>
                    <td>{{v.name}}</td>
                    <td>{{v.price}}</td>
                    <td><button @click="reduce(v)">-</button>{{v.num}}<button @click="add(v)">+</button></td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</script>
<script>
    var phone={
        template:'#phone',
        props:['lists'],
        methods:{
            reduce(v){
                if(v.num>0){
                    v.num--;
                }
            },
            add(v){
                if(v.num<10){
                    v.num++;
                }
            }
        }
    }
    var app=new Vue({
        el:'#hd',
        data:{
            goods:[
                {id:1,name:'小米5手机',price:1499,num:1},
                {id:2,name:'小米6手机',price:2299,num:1},
                {id:3,name:'小米8手机',price:2699,num:1},
                {id:4,name:'红米5手机',price:599,num:1},
                {id:5,name:'小米MAX2手机',price:1999,num:1},
            ],

        },
        computed:{
            total(){
                var price=0;
                this.goods.forEach(v=>{
                    price+=v.num*v.price;
                })
                return price;
            }
        },
        components:{
            phone
        }
    })
</script>
</html>